<template>
  <div class="box2">
    <el-form
      :model="ruleForm"
      :rules="rules"
      :inline="false"
      ref="ruleForm"
      label-width="200px"
      class="demo-ruleForm"
      size="medium"
    >
      <div class="must">
        <!-- <el-form-item label="联系人：" prop="Linkman">
          <el-input v-model="ruleForm.Linkman" placeholder="请填写名称或姓名"></el-input>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>示例：张三</span>
            </div>
          </div>
        </el-form-item> -->
        <el-form-item label=" 商标申请号：" prop="appNum">
          <el-input v-model="ruleForm.appNum" placeholder="请填写"></el-input>
            <!-- <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提醒：商标申请号不能为空</span>
            </div>
          </div> -->
        </el-form-item>
        <!-- 商标确认书： -->
        <el-form-item class="afterAmount" label="网上确认书：" prop="appNum">
          <img
            v-if="ruleForm.qrfilesUrl"
            style="width:148px;height:148px;margin-bottom:10px"
            :src="ruleForm.qrfilesUrl"
            alt
          />
          <upfile :callback="setSure"></upfile>
          <div class="exam-img">
            <div class="img-inform">
                  <img src="../../assets/imgs/inform.png">
                <span>示例:</span>
            </div>
            <examimg :imgType="4"></examimg>
          </div>
          <div>
            <span class="informs">
              请点此
              <a :href="mconfig.host + '/file/download?fileType=2'">下载网上确认书</a>,查到相应商标编号并填充
            </span>
            <br />
            <span class="notice">请将下载的商标确认书填写完成, 然后上传JPG文件或是PNG文件</span>
          </div>
        </el-form-item>

        <el-form-item label="其他附件：" prop="dengjichenluofile">
          <uploads :callback="backUrl" :delUrl="delUrl" :file_config="{field:'dengjichenluofile'}" :list="ruleForm.dengjichenluofile"></uploads>
          <div class="inform">
            <img src="../../assets/imgs/inform.png" alt="通知" />
            <div class="content">
              <span>提示：其他附件</span>
            </div>
          </div>
        </el-form-item>

        <el-form-item>
          <div class="btns">
            <el-button type="primary" @click="outStep">上一步</el-button>
            <el-button type="primary" @click="testing('ruleForm')">提交并审核</el-button>
          </div>
        </el-form-item>
        <el-dialog
          class="dialog"
          :show-close="false"
          :center="true"
          :visible.sync="dialogVisible"
          width="460px"
          :before-close="handleClose"
        >
          <div class="hint" style="margin-top:-20px">
            <img src="../../assets/imgs/branch.png" alt="提示图片" />
            <span>选择您想去办理的网点</span>
          </div>
          <div class="tishi">
               <el-form-item  style="margin-left:50px"  label="选择网点：" prop="branchNetworkId">
            <el-select style="margin-left:-100px"  v-model="ruleForm.branchNetworkId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
              >
                <span style="float: left">{{ item.deptName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          </div>
          
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false" class="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="hintMsg"
          :show-close="false"
          title="温馨提示"
          :visible.sync="centerDialogVisible"
          width="462px"
          :before-close="handleClose"
        >
          <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="skip">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>
<script>
import upfile from "../common/upfile";
import { mapState } from "vuex";
import examimg from "../common/imgExample";
import uploads from "../common/uploads";
export default {
  name: "BashStepForm19",
  components: { upfile,examimg,uploads },
  data() {
    return {
      //网点列表
      options: [],
      //提交成功弹出框变量
      centerDialogVisible: false,
      //网点弹出框控制变量
      dialogVisible: false,
      //提交表单
      formData: new FormData(),
      //表单唯一id
      classId: "",
      //共有人模板
        // 是否有商标确认书
        showImg: '',
      //填写的信息
      ruleForm: {
        Linkman: "", // 联系人
        organization: "", // 机构名称
        appNum: "", // 商标申请号
        qrfiles: "", // 商标确认书
        branchNetworkId: "", // 网点编号
        qrfilesUrl: "", // 后端返回确认书图片框地址
        dengjichenluofile:[]
      },
      proAppends: [], // 共有人

      rules: {
        Linkman: [
          { required: true, message: "选项不能为空", trigger: "change" },
           { pattern: /^[\u4E00-\u9FA5A-Za-z]{2,5}$/, message: "名字输入错误" },
        ],
          // upload: [
          //         { required: true, message: "选项不能为空", trigger: "change" },
          //       ],
        appNum: [
          {
              required: true,
              message: "请输入商标申请号",
              trigger: "blur",
          },
          {
              pattern: /^[A-Za-z0-9]{0,30}$/,
              message: "请输入正确的商标申请号",
              trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["stateJdg", "alterData"]),
  },
  methods: {
    backUrl(url,file_config){
        this.ruleForm[file_config["field"]].push(url)
    },
    delUrl(index,file_config){
        this.ruleForm[file_config["field"]].splice(index,1)
        this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
    },
    //确认书
    setSure(files) {
      this.ruleForm.qrfiles = files[0];
      this.ruleForm.qrfilesUrl = ""; // 修改img图片地址隐藏img
      if(this.ruleForm.qrfiles) {
        this.showImg = true
      }else {
        this.showImg = false
      }
    },
    //返回上一步
    outStep() {
      this.$emit("wp", 1, "请填写申请业务信息");
    },
    //提示模板
    open1(msg, types = "success") {
      this.$message({
        message: msg,
        type: types,
      });
    },
    //弹出框的选项确认框
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },

      // 提交前验证
      testing(formName){
         this.$refs[formName].validate((valid) => {
          if(valid ==  false){
          this.dialogVisible = false
          }else{ 
            if(this.showImg){
               this.dialogVisible = true
            }else{
            this.open1("商标确认书未上传", "error");
            }
          }
         })
    },

    //表单提交事件
    submitForm(formName) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid && this.ruleForm.branchNetworkId != "") {
          //每次提交重新生成新的FormData用于储存新的数据
          this.formData = new FormData();
          this.dialogVisible = false;

          /*********************** 公共数据开始 **********************/
          //获取vuex中保存的步骤一、二中的数据
          let arr = this.$store.getters.getRuleForm;
          for (let key in arr) {
            this.formData.append(key, arr[key]);
          }
          /*********************** 公共数据结束 **********************/

          /*********************** 需要提交的数据开始 **********************/
          let ruleForm = this.ruleForm;
          this.formData.append("classId", this.classId); // 业务唯一编号
          this.formData.append("contacts", ruleForm.Linkman); // 联系人
          this.formData.append("appNum", ruleForm.appNum); // 商标申请号
          this.formData.append("qrfiles", ruleForm.qrfiles); // 商标确认书
          this.formData.append("branchNetworkId", ruleForm.branchNetworkId); // 网点编号
          this.formData.append("otherfile", JSON.stringify(this.ruleForm.dengjichenluofile));
          /*********************** 需要提交的数据结束 **********************/


          /*********************** 请求开始 **********************/
          let urls = "";
          if (this.stateJdg) {
            // 修改操作
            this.formData.append("id", this.alterData.public.id); // 修改才需要传的id
            this.formData.append("modelId", this.alterData.public.modelId); // 修改才需要传的modelId
            urls = "/trademark/proporda/modifyNoCommit";
          } else {
            // 新增操作
            urls = "/trademark/proporda/firstSubmit";
          }

          //配置请求头
          let config = {
            header: {
              "Content-Type": "multipart/form-data",
            },
          };
          // axios向后端发送数据
          this.$http
            .post(urls, this.formData, config)
            .then((response) => {
              //若状态码不为200则不跳转
              if (response.data.code != 200) {
                this.open1("提交失败", "error");
                return;
              }
              this.centerDialogVisible = true;
            })
            .catch((error) => {});
          /*********************** 请求结束 **********************/
        } else {
          this.open1("请选择网点编号", "error")
          return false;
        }
      });
      console.log(this.options)
    },
    //跳转函数
    skip() {
      this.centerDialogVisible = false;
      this.open1("操作成功");
      this.$router.push({
        path: "/business/myBusiness/auditing",
      });
    },
  },
  created() {
    //获取从存储在路由中的classId
    this.classId = this.$route.query.id;
    //获取网点列表
    this.$http.get("/trademark/system/dept/findDept").then((res) => {
      this.options = res.data.data;
    });
  },
  mounted() {
    
   if( this.$store.state.stateJdg){
          this.showImg = true
    }
    // 修改操作页面回显数据
    if (this.stateJdg) {
      // 第三步骤——数据回显
      let {
        contacts, // 联系人
        ageName, // 代理机构名称
        appNum, // 商标注册号
        otherfile,
        branchNetworkId, // 网点编号
      } = this.alterData.data;
      let {
        qrfile, // 商标确认书
      } = this.alterData.public;

      this.ruleForm.Linkman = contacts; //联系人
      this.ruleForm.organization = ageName; //代理机构名称
      this.ruleForm["dengjichenluofile"] = JSON.parse(otherfile);
      this.ruleForm.appNum = appNum; //商标注册号
      this.ruleForm.qrfilesUrl = this.mconfig.host + String(qrfile); // 后端返回确认书地址
      this.ruleForm.branchNetworkId = branchNetworkId; // 后端返回确认书地址
    }
  },
};
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: center;
  .el-button {
    margin: 0 20px;
  }
}
.box2 {
  padding-right: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // margin-top: 100px;
  width: 100%;
  min-height: 800px;
  .tle {
    font-size: 24px;
    color: #000;
  }
  .el-form {
    width: 100%;
  }
  .must,
  .select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    margin-bottom: 80px;
    width: 100%;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .el-form-item {
      width: 680px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
    }
  }
  .must {
    margin-bottom: 20px;
  }
  .line {
    width: calc(100% - 280px);
    margin: 10px auto;
    height: 1px;
    border-top: 1px dashed #d9d9d9;
  }
  .imgHint {
    margin: 5px;
    font-size: 12px;
    line-height: 17px;
    color: #f96900;
  }
  .affirm {
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .input {
    width: 190px;
  }
  .upload {
    margin: 20px 0;
  }
  .type-number {
    width: 250px;
  }

  .must,
  .select {
    display: flex;
    position: relative;
    left: -60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 30px;
    // width: 1000px;
    // border: 1px solid #bbbbbb;
    border-radius: 10px;
    .inform {
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 100%;
      width: 250px;
      height: 32px;
      color: #f96900;
      font-size: 10px;
      line-height: 16px;
      img {
        margin: 11px;
      }
      .content {
        display: flex;
        flex-direction: column;
        .ts {
          text-indent: 3em;
        }
      }
    }
    .el-form-item {
      width: 580px;
    }
    .inline {
      display: flex;
      .el-form-item {
        margin: 0;
        width: 290px !important;
      }
      margin-bottom: 22px;
    }
  }

  .informs {
    position: absolute;
    width: 500px;
    font-size: 12px;
    color: #a0a3a5;
    a {
      text-decoration: none;
      color: #3685ff;
    }
  }
  .notice {
    color: #f00;
    font-size: 12px;
  }
  .tle {
    list-style: none;
    margin: 40px 0 20px;
    font-size: 24px;
    & ~ .tle {
      color: #bbb;
    }
  }
  .hint {
    color: #f96900;
    background-color: #fff;
    .el-form-item__label {
      width: 150px;
    }
    img {
      width: 20px;
    }
  }
  .el-steps {
    width: 70%;
    height: 200px;
  }
  .el-button {
    display: inline;
    margin: 0 20px;
  }

  .common .el-button {
    background-color: #fff !important;
    border-color: #bbb !important;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-between;
  color: #fff;
  .lan {
    background-color: #2c9dfc !important;
    border-color: #2c9dfc !important;
  }
}

.tishi{
  display: flex;
  justify-content: space-between;
 
}
.dialog /deep/.el-form-item__label {
   text-align: right;
  
  width: 100px !important;
}
.dialog /deep/.el-form-item__content {

 
  margin: 0px;
 
 
}
.dialog /deep/.el-input {
 
  // width: 250px;
}
.el-checkbox-group {
  line-height: 14px;
}
// .is-checked/deep/.el-radio__inner,
// .is-checked/deep/.el-checkbox__inner {
//   border-color: #999999;
//   background: #999999;
// }
.el-radio/deep/.el-radio__inner:hover {
  border-color: #999999 !important;
}
.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
  color: #333;
}
.is-focus .el-checkbox__inner {
  border-color: #999999 !important;
}
.el-checkbox/deep/.el-checkbox__inner:hover {
  border-color: #999999 !important;
}
.el-step__head.is-process {
  border-color: #f96900;
  color: #f96900 !important;
}
.hintMsg {
  /deep/.el-dialog__header {
    display: flex;
    justify-content: center;
    font-weight: bold;
  }
  .dialog-footer {
    justify-content: center;
    .el-button {
      border-color: #2c9dfc !important;
      background: #2c9dfc !important;
    }
  }
}
.cancel{
   background: #ccc;
   border-color:#ccc;
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 465px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>